{{-- 继承布局模板 --}}
@extends( 'version-2017.layouts.main-layout' )


{{--  当前页面的样式表 --}}
@section('style')
    <link rel="stylesheet" type="text/css" href="{{ asset('version-2017/css/production.css') }}">
@endsection()


{{-- 插入标题 --}}
@section('title')
    <title>广州便雅悯视光网络科技公司-试戴购买一体机</title>
@endsection


@section('content')
    <!-- 海报 -->
    <section class="banner try-on"></section>

    <!-- 页面导航 -->
    <section class="navigation">
        <ul class="navigation-list bym-not-list bym-wrapper clearfix">
            <li class="navigation-list-item">
                <a href="#introduction">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-introduction.png" alt="">
                    </i>
                    <p class="item-name">产品介绍</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#scenario">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-scenario.png" alt="">
                    </i>
                    <p class="item-name">应用场景</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#configure">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-configure.png" alt="">
                    </i>
                    <p class="item-name">尺寸+配置</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#function">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-function.png" alt="">
                    </i>
                    <p class="item-name">产品功能</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#advantage">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-advantage.png" alt="">
                    </i>
                    <p class="item-name">核心优势</p>
                </a>
            </li>
            <li class="navigation-list-item">
                <a href="#partner">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-common/icon-navigation-case.png" alt="">
                    </i>
                    <p class="item-name">客户案例</p>
                </a>
            </li>

        </ul>
    </section>

    <!-- 产品介绍 -->
    <section class="introduction try-on" id="introduction">
        <div class="bym-wrapper">
            <div class="introduction-header">
                产品介绍
            </div>
            <div class="introduction-title">
                满天星试戴购买一体机
            </div>
            <p class="introduction-desc">
                满天星试戴购买一体机是一款进行眼镜及相关产品销售的高端产品，以逼真的3D实时动态试戴技术为核心，
                颠覆传统眼镜门店的营销模式，一台满天星试戴购买一体机即可实现眼镜选款选型和购买流程。
            </p>
            <div class="introduction-picture">
                <img src="" alt="">
            </div>
            <ul class="introduction-list bym-not-list clearfix">
                <li class="introduction-list-item">PA01A1型机器</li>
                <li class="introduction-list-item">PA02B1型机器</li>
        </div>
    </section>
    <!-- 产品介绍 end -->


    <!-- 场景 -->
    <section class="scenario try-on" id="scenario">

        <div class="bym-wrapper">
            <div class="scenario-header">
                应用场景
            </div>
            <ul class="scenario-list bym-not-list clearfix">
                <li class="scenario-list-item" v-for="item in categoryList" :key="item.id" :class="[item.id === activeId ? 'active': '']" @mouseenter="activeHandle(item.id)">
                    <div class="item-container">
                        <div class="item-normal">
                            <div class="item-normal-cover">
                                <img :src="item.cover" alt="">
                            </div>
                            <h4 class="item-normal-name" v-text="item.title"></h4>
                            <p class="item-normal-summary" v-text="item.summary.join('，')"></p>
                        </div>
                        <div class="item-reverse">
                            <p class="item-reverse-en" v-text="item.name"></p>
                            <dl class="bym-not-list">
                                <dt v-text="item.title"></dt>
                                <dd v-for="childCategory in item.summary" v-text="childCategory"></dd>

                            </dl>
                        </div>
                    </div>
                </li>

            </ul>
        </div>
    </section>
    <!-- 场景 end -->


    <!-- 配置 -->
    <section class="configure try-on" id="configure">
        <div class="bym-wrapper">

            <div class="configure-header">
                尺寸+配置
            </div>

            <div class="configure-size">

                <div :class="['configure-size-picture', isActive? 'active': ''  ]" ref="picture">
                    <div class="configure-size-picture-mask">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/Product_sdgmytj_yycj_008.png" alt="">
                    </div>
                </div>

                <ul class="configure-size-list bym-not-list">
                    <li class="configure-size-list-item">
                        <div class="item-picture">
                            <img src="" alt="">
                        </div>
                        <h5 class="item-name">PA01A1型机器尺寸</h5>
                        <p class="item-argument">190CM*70CM*8CM</p>
                    </li>
                    <li class="configure-size-list-item">
                        <div class="item-picture">

                        </div>
                        <h5 class="item-name"> PA02B1型机器尺寸 </h5>
                        <p class="item-argument">210CM*70CM*8CM</p>
                    </li>
                </ul>

            </div>


            <div class="configure-hardware">
                <h3 class="configure-hardware-title">
                    配置硬件
                </h3>
                <ul class="configure-hardware-list bym-not-list">

                    <li class="item">

                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/Product_sdgmytj_pzyj_001.png" alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">液晶触摸屏一体机</h5>
                                <p class="item-content-desc"></p>
                            </div>
                            <div class="item-content-summary">
                                采用43寸虚拟试戴屏幕，消费者可在机器上自主完成眼镜选型选款和购买流程。
                            </div>
                        </div>
                    </li>
                    <li class="item">

                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/Product_sdgmytj_pzyj_002.png" alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">远焦窄角摄像头</h5>
                                <p class="item-content-desc"></p>
                            </div>
                            <div class="item-content-summary">
                                采用普通摄像头进行虚拟试戴，保证画质高清，同时有效降低商家成本。
                            </div>
                        </div>

                    </li>
                    <li class="item">
                        <div class="item-cover">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/Product_sdgmytj_pzyj_003.png" alt="">
                        </div>
                        <div class="item-content">
                            <div class="item-content-header">
                                <h5 class="item-content-name">广告屏</h5>
                                <p class="item-content-desc">（仅适用于PA02B1型）</p>
                            </div>
                            <div class="item-content-summary">
                                支持图片、文字、视频等文件格式，可用于产品活动宣传或店铺品牌推广。
                            </div>
                        </div>
                    </li>
                </ul>
            </div>

        </div>
    </section>
    <!-- 配置end -->


    <!-- 功能 -->
    <section class="function" id="function">
        <div class="function-header">
            产品功能
        </div>

        <!-- Swiper -->
        <div class="function-content">
            <div class="swiper-container" id="function_swiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">

                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">01/05</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/Product_sdgmytj_cpgn_001.png" alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">3D虚拟试戴</h4>
                                <p class="item-text-summary">帮助消费者快速选型选款，提高商品成交率</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">01/05</h4>
                                <h6 class="item-text-en">3D VIRTUAL TRY-ON</h6>
                                <h5 class="slide-cotnent-title">3D虚拟试戴</h5>
                                <p class="slide-cotnent-desc">
                                    3D虚拟试戴技术可以让用户在线选购产品时像照镜子一样在线虚拟试穿试戴。
                                    作为眼镜选购一种辅助手段，它可以让用户直接判断眼镜的颜色和款式是否适合自己
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">02/05</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/Product_sdgmytj_cpgn_002.png" alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">虚拟库存</h4>
                                <p class="item-text-summary">无限装载产品，解决库存积压和商品损耗难题</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">02/05</h4>
                                <h6 class="item-text-en">VIRTUAL REPOSITORY</h6>
                                <h5 class="slide-cotnent-title">虚拟库存</h5>
                                <p class="slide-cotnent-desc">
                                    以3D模型进行产品展示，无限装载，避免商品损耗，实现零库存销售，虚拟仓库让商家无需进货也能销售眼镜，解决库存难题；
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">03/05</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/Product_sdgmytj_cpgn_003.png" alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">进销存管理系统</h4>
                                <p class="item-text-summary">后台管理多种产品，清晰展示进货、销货、存货量</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">03/05</h4>
                                <h6 class="item-text-en">INVOICING MANAGEMENT</h6>
                                <h5 class="slide-cotnent-title">进销存管理系统</h5>
                                <p class="slide-cotnent-desc">
                                    后台管理多种产品，清晰展示进货、销货、存货量，商家可实时关注热销及滞销商品，及时盘点库存，分析销售趋势，掌握销售市场动态
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">04/05</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/Product_sdgmytj_cpgn_004.png" alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">验光数据自动化管理</h4>
                                <p class="item-text-summary">系统收集并管理用户的验光数据，实现自动化管理模式</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">04/05</h4>
                                <h6 class="item-text-en">PRESCRIPTION MANAGEMENT </h6>
                                <h5 class="slide-cotnent-title">验光数据自动化管理</h5>
                                <p class="slide-cotnent-desc">
                                    系统收集并管理用户的验光数据，实现自动化管理模式，通过智能数据分析进一步帮助用户进行眼睛复查
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>
                    <div class="swiper-slide">
                        <!-- 滑块内部 -->
                        <div class="function-content-item">
                            <h4 class="item-number">05/05</h4>
                            <div class="item-picture">
                                <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/Product_sdgmytj_cpgn_005.png" alt="">
                            </div>
                            <div class="item-text">
                                <h4 class="item-text-name">完善的分成体系</h4>
                                <p class="item-text-summary">商家、店铺、业务员都拥有各自的分成和独立的财务流水情况</p>
                                <!-- 隐藏部分 -->
                                <h4 class="item-text-number">05/05</h4>
                                <h6 class="item-text-en">MULTISTAGE DISTRIBUTION</h6>
                                <h5 class="slide-cotnent-title">完善的分成体系</h5>
                                <p class="slide-cotnent-desc">
                                    商家可以在财务管理系统中设置和查看分成情况，商家、店铺、业务员都拥有各自的分成和独立的财务流水情况。
                                </p>
                            </div>
                        </div>
                        <!-- 滑块内部 end -->
                    </div>

                </div>
            </div>
            <div class="swiper-button-next" id="function_next"></div>
            <div class="swiper-button-prev" id="function_prev"></div>
        </div>
    </section>
    <!-- 功能 END -->


    <!-- 优势 -->
    <section class="advantage try-on" id="advantage">

        <div class="bym-wrapper">
            <div class="advantage-header">
                产品优势
            </div>

            <ul class="advantage-list bym-not-list clearfix">
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/-1.png" title="" />
                    </i>
                    <h4 class="item-title">降低开店成本</h4>
                    <p class="item-desc">商品3D展示，节省陈列空间，降低货架制作成本</p>
                </li>

                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/-2.png" title="" />
                    </i>
                    <h4 class="item-title">实现零库存开店</h4>
                    <p class="item-desc">虚拟货架呈现3D模型产品避免商品损耗</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/-3.png" title="" />
                    </i>
                    <h4 class="item-title">增加入店客流</h4>
                    <p class="item-desc">3D虚拟试戴体验吸引客流入店体验，提升门店人气</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/-4.png" title="" />
                    </i>
                    <h4 class="item-title">提高商品成交率</h4>
                    <p class="item-desc">系统通过脸型识别、虚拟试戴等功能有效促成商品成交</p>
                </li>
                <li class="advantage-list-item">
                    <i class="item-icon">
                        <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/-5.png" title="" />
                    </i>
                    <h4 class="item-title">提升门店品牌形象</h4>
                    <p class="item-desc">一体机铺排方便快捷，有利于门店品牌推广,提升消费者的购物体验</p>
                </li>

            </ul>
        </div>

    </section>
    <!-- 优势 end-->

    <!-- 合作伙伴 -->
    <section class="partner try-on" id="partner">

        <div class="bym-wrapper">
            <div class="partner-header">
                合作伙伴
            </div>
            <div class="partner-content swiper-container" id="partner_content">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/icon-1.png" alt="">
                        </div>
                        <p class="slide-name">卡尔蔡司</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/icon-2.png" alt="">
                        </div>
                        <p class="slide-name">眼之悦</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://bym-website.gz.bcebos.com/assets/production-try-on/icon-3.png" alt="">
                        </div>
                        <p class="slide-name">鑫慧宏</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://gz.bcebos.com/bym-website/assets/production-try-on/ad_01.png" alt="">
                        </div>
                        <p class="slide-name">东明眼镜</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://gz.bcebos.com/bym-website/assets/production-try-on/ad_02.png" alt="">
                        </div>
                        <p class="slide-name">敏悦科技</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://gz.bcebos.com/bym-website/assets/production-try-on/ad_03.png" alt="">
                        </div>
                        <p class="slide-name">好雅眼镜</p>
                    </div>
                    <div class="swiper-slide">
                        <div class="slide-picture">
                            <img src="https://gz.bcebos.com/bym-website/assets/production-try-on/ad_04.png" alt="">
                        </div>
                        <p class="slide-name">洁视明眸</p>
                    </div>

                </div>
            </div>

        </div>

    </section>
    <!-- 合作伙伴 END -->
@endsection



@section('script')
    {{-- 配置脚本 --}}
    <script type="text/javascript" src="{{asset('version-2017/js/production-try-on.js')}}"></script>
    <script type="text/javascript" src="{{asset('version-2017/js/production.js')}}"></script>
    <script  type="text/javascript" >
        new Swiper("#partner_content" ,{
            slidesPerView: 4,
            paginationClickable: true,
            loop: true,
//            simulateTouch: true,
            spaceBetween: 20,
            autoplay: 3000,//可选选项，自动滑动
            // centeredSlides : true,
        } );
    </script>
@endsection